<template>
  <el-select
    ref="main"
    v-model="userCode"
    size="small"
    :filterable="remote ? true : filterable"
    :remote="remote"
    :readonly="readonly"
    :remote-method="handleRemoteMethod"
    :clearable="disabled ? false : clearable"
    :placeholder="placeholder"
    :disabled="disabled"
    :allow-create="allowCreate"
    @change="handleChange"
  >
    <el-option
      v-for="(item, index) in userList"
      :key="index"
      :label="item[labelKey]"
      :value="item[valueKey]"
    >
    </el-option>
  </el-select>
</template>

<script>
import { fetchList,getSysUserByRoleCode} from "@/api/admin/user";
import { mapGetters } from "vuex";
export default {
  name: "UserSelect",
  data() {
    return {
      // labelKey: "nikename",
      // valueKey: "userCode",
      userList: [],
      userCode: undefined,
      deviceOperateNo: undefined
    };
  },
  props: {
    value: String,
    userCodeKey: {
      type: String
    },
    searchScope: {
      type: String
    },
    operateNo: {
      type: String
    },
    column: {
      type: Object,
      default: () => {
        return {};
      }
    },
    dicQuery: {
      type: Object,
      default: () => {
        return {};
      }
    },
    disabled: {
      type: Boolean,
      default: false
    },
    remote: {
      type: Boolean,
      default: false
    },
    filterable: {
      type: Boolean,
      default: true
    },
    readonly: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String,
      default: ""
    },
    clearable: {
      type: Boolean,
      default: true
    },
    belongToStation: {
      type: Boolean,
      default: false
    },
    row: Object,
    labelKey: {
      type: String,
      default: "nikename"
    },
    valueKey: {
      type: String,
      default: "userCode"
    },
    allowCreate: {
      type: Boolean,
      default: false
    },
    prop: {
      type: String,
      default: ""
    }
  },
  watch: {
    value: {
      handler(val) {
        if (!val) {
          this.userCode = null;
          this.setFormValue(this.userCodeKey, null);
          this.setFormValue(this.operateNo, null);
        } else {
          this.userCode = this.getFormValue(this.userCodeKey);
          this.deviceOperateNo = this.getFormValue(this.operateNo);
        }
      },
      immediate: false
    }
  },
  computed: {
    ...mapGetters(["userInfo"]),
    params() {
      var params = { size: -1 };
      if (this.belongToStation) {
        params.lineCode = this.userInfo.lineCode;
        params.stationCode = this.userInfo.stationCode;
      }
      return Object.assign(params, this.dicQuery);
    }
  },
  created() {
    if (this.prop && this.allowCreate) {
      this.userCode = this.getFormValue(this.prop);
    } else {
      this.userCode = this.getFormValue(this.userCodeKey);
    }
    if (this.userCode) {
      let user = {};
      user[this.labelKey] = this.value;
      user[this.valueKey] = this.userCode;
      this.userList.push(user);
    }
    this.getUserList(this.params);
  },
  inject: {
    formSafe: { default: null }
  },
  methods: {
    handleChange(value) {
      this.prop && this.allowCreate && this.setFormValue(this.prop, value);
      this.setFormValue(this.userCodeKey, value);
      if (!value) {
        this.$emit("input", "");
        return;
      }
      if (!this.userList) {
        return;
      }
      for (const user of this.userList) {
        if (user[this.valueKey] == value) {
          this.setFormValue(this.operateNo, user.deviceOperateNo);
          this.$emit("input", user[this.labelKey]);
          break;
        }
      }
    },
    handleRemoteMethod(value) {
      let query = { ...this.params, nikename: value };
      this.getUserList(query);
    },
    getUserList(query) {     
      if(this.searchScope){           
	    getSysUserByRoleCode().then((response)=>{
		this.userList = response.data.data;			
	      });
      
      }else{         
           fetchList(query).then(response => {
             this.userList = response.data.data.records;
           });
      }      
    },
    setFormValue(key, value) {
      if (key) {
        value = value == null ? undefined : value;
        if (this.row) {
          this.$set(this.row, key, value);
        } else if (this.formSafe) {
          this.formSafe.value[key] = value;
        }
      }
    },
    getFormValue(key) {
      if (key) {
        if (this.row) {
          return this.row[key];
        } else if (this.formSafe) {
          return this.formSafe.value[key];
        }
      }
    }
  }
};
</script>

<style></style>
